<template>
  <div id="leftSide">

    <!--选择彩种列表-->
    <div class="list-group select-lottery">
      <a href="#" class="list-group-item">
        <div class="con-left">
          <img src="../../assets/images/container1/leftside/1.png" width="10%"/>
          <h5>竞猜足球</h5>
          <span class="one">单关固赔</span>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="con-left">
          <img src="../../assets/images/container1/leftside/2.png" width='10%'/>
          <h5>竞猜篮球</h5>
          <span class="two">NBA天天猜</span>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="con-left">
          <img src="../../assets/images/container1/leftside/3.png" width="10%"/>
          <h5>双色球</h5>
          <span>2元可中1000万</span>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="con-left">
          <img src="../../assets/images/container1/leftside/4.png" width="10%"/>
          <h5>大乐透</h5>
          <span class="four">3亿大派奖</span>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="con-left">
          <img src="../../assets/images/container1/leftside/3.png" width="10%"/>
          <h5>福彩3D</h5>
          <span>竞猜3号易中奖</span>
        </div>
      </a>
      <a href="#">
        <hr>
      </a>

      <!--下半部分-->
      <a href="#" class="list-group-item last" @click.prevent="">
        <table>
          <tr>
            <td class="red">数</td>
            <td class="cold">七星彩</td>
            <td class="cold">七乐彩</td>
          </tr>
          <tr>
            <td class="red">彩</td>
            <td>排列三</td>
            <td>排列五</td>
          </tr>
          <tr>
            <td class="green">竞</td>
            <td>任选九</td>
            <td>胜负彩</td>
          </tr>
          <tr>
            <td class="green">彩</td>
            <td>北京单场</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td class="blue">高</td>
            <td>快三</td>
            <td>老11选5</td>
          </tr>
          <tr>
            <td class="blue">彩</td>
            <td>幸运11选5</td>
            <td>欢乐11选5</td>
          </tr>
        </table>
      </a>
    </div>

    <!--广告-->
    <div class="warning-text">
      <p>恭喜尾号******3212中本期一等奖1000元</p>
    </div>

    <!--最新开奖-->
    <div class="ultramodern-award">
      <div class="panel panel-default">

        <!--标题-->
        <div class="panel-heading title">
          <h4>最新开奖</h4>
        </div>

        <!--开奖具体信息-->
        <div class="panel-body content">
          <div>
            <!--选项卡标题-->
            <ul class="nav nav-tabs" role="tablist">

              <!--数字彩-->
              <li role="presentation" class="active">
                <a href="#lottery1" aria-controls="home" role="tab" data-toggle="tab">数字彩</a>
              </li>

              <!--竞足-->
              <li role="presentation">
                <a href="#football1" aria-controls="profile" role="tab" data-toggle="tab">竞足</a>
              </li>

              <!--竞蓝-->
              <li role="presentation">
                <a href="#basketball1" aria-controls="messages" role="tab" data-toggle="tab">竞蓝</a>
              </li>

            </ul>

           <!--tab内容-->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="lottery1">
                <!--数字彩-->
                <div class="star-lottery">
                  <div class="first-line">
                    <span class="left">七星彩</span>
                    <span class="right"> 2018017期 02-09 周五</span>
                  </div>
                  <div class="two-line">
                    <span class="left">3 9 0 6 7 9 1</span>
                    <span class="right">详情</span>
                  </div>
                </div>
                <!--双色球-->
                <div class="two-ball">
                  <div class="first-line">
                    <span class="left">双色球</span>
                    <span class="right"> 2018017期 02-08 周四</span>
                  </div>
                  <div class="two-line">
                    <span class="left">03 06 11 26 30 32 12</span>
                    <span class="right">详情</span>
                  </div>
                </div>
                <!--3D-->
                <div class="lottery-3d">
                  <div class="first-line">
                    <span class="left">福彩3D</span>
                    <span class="right"> 2018017期 02-09 周六</span>
                  </div>
                  <div class="two-line">
                    <span class="left">6 5 1</span>
                    <span class="right">详情</span>
                  </div>
                  <div style="margin-top: 5px;color: red">
                    <span>请注意开奖时间</span>
                    <span style="float:right">延期失效</span>
                  </div>
                </div>
              </div>

              <div role="tabpanel" class="tab-pane" id="football1">
                <ul>
                  <li>
                    <span class="left">周六001</span>
                    <span>悉尼FC</span>
                    <span class="red">0:4</span>
                    <span>墨尔本城</span>
                  </li>
                  <li>
                    <span class="left">周六002</span>
                    <span>大阪樱花</span>
                    <span class="red">2:3</span>
                    <span>川崎前锋</span>
                  </li>
                  <li>
                    <span class="left">周六003</span>
                    <span>杜塞尔多夫柏林联合</span>
                  </li>
                  <li>
                    <span class="left">周六004</span>
                    <span>比勒费尔杜伊斯堡</span>
                  </li>
                  <li>
                    <span class="left">周六005</span>
                    <span>海登海姆雷根斯堡</span>
                  </li>
                </ul>
              </div>

              <div role="tabpanel" class="tab-pane" id="1">
                <ul>
                  <li>
                    <span>周五301</span>
                    <span>布罗斯</span>
                    <span>69:77</span>
                    <span>费内巴切</span>
                  </li>
                  <li>
                    <span>周五302</span>
                    <span>莫斯科</span>
                    <span>69:74</span>
                    <span>萨尔基</span>
                  </li>
                  <li>
                    <span>周五303</span>
                    <span>米兰</span>
                    <span>89:100</span>
                    <span>贝尔格</span>
                  </li>
                  <li>
                    <span>周五304</span>
                    <span>奥林匹</span>
                    <span>80:90</span>
                    <span>皇家马</span>
                  </li>
                  <li>
                    <span>周五305</span>
                    <span>快船</span>
                    <span>108:95</span>
                    <span>活塞</span>
                  </li>
                </ul>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
  export default {
    name: "leftSide"
  }
</script>

<style scoped>

  #leftSide {
    background: #fff;
    font-size: 18px;
  }

  /*一等奖*/
  #leftSide .warning-text{
    color: red;
    animation: changeText 2s infinite;
  }
  @keyframes changeText{
    0%{color: #e23a3a}
    50%{color: green}
    100%{color: red}
  }

  #leftSide .select-lottery h5 {
    display: inline;
  }

  /*标题大小*/
  #leftSide .select-lottery h5{
    font-size: 18px;
  }

  /*过渡*/
  #leftSide .select-lottery h5:hover{
   transform: scale(0.9);
    transition: 3s ease;
  }

  /*移入*/
  #leftSide .select-lottery a:hover {
    color: #e23a3a;
  }

  /*选择彩种span*/
  #leftSide .select-lottery span {
    color: #999;
    margin-left: 30px;
  }

  /*第一个*/
  #leftSide .select-lottery span.one {
    margin-left: 49px;
  }

  /*第二个*/
  #leftSide .select-lottery span.two {
    margin-left: 37px;
  }

  /*第四个*/
  #leftSide .select-lottery span.four {
    margin-left: 59px;
  }

  /*去掉每个边框*/
  #leftSide .list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
  }

  /*去掉背景色*/
  #leftSide a:hover {
    background: white;
  }
  #leftSide a.six ul {
    list-style-type: none;
    padding-left: 5px;
  }
  #leftSide a.six h4 {
    width: 20px;
    display: inline-block;
  }
  #leftSide a.six div {
    display: inline-block;
    width: 200px;
    height: 100px;
    border: 1px solid red;
  }

  /*表格*/
  #leftSide .select-lottery table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
  }
  /*灰色*/
  #leftSide .select-lottery .cold{
    font-size: 14px;
    color: #ccc;
  }

  #leftSide .select-lottery .last:hover{
    color: #333;
  }

  /*条目红色*/
  #leftSide .select-lottery .red{
    color: #e23a3a
  }
  #leftSide .select-lottery .green{
    color: green
  }
  #leftSide .select-lottery .blue{
    color: blueviolet;
  }

  /*过渡*/
  #leftSide .select-lottery table:hover tr td{
    color: red;
    transform: scale(0.9);
    transition: 3s ease;
  }

  /*最新开奖栏目*/
  #leftSide .ultramodern-award{
    font-size: 16px;
    color: #555;
  }
  #leftSide .ultramodern-award:hover{
    cursor: pointer;
  }
  /*标题*/
  #leftSide .ultramodern-award .title{
    height: 57px;
    font-size: 18px;
    background: white;
  }
  /*每个部分大小*/
  #leftSide .ultramodern-award #lottery1 .star-lottery,
  #leftSide .ultramodern-award #lottery1 .two-ball,
  #leftSide .ultramodern-award #lottery1 .lottery-3d{
    width: 90%;
    height: 33%;
    margin-top: 7px;
  }

  /*详情变色*/
  #leftSide .ultramodern-award #lottery1 .star-lottery:hover .two-line .right,
  #leftSide .ultramodern-award #lottery1 .two-ball:hover .two-line .right,
  #leftSide .ultramodern-award #lottery1 .lottery-3d:hover .two-line .right{
    color: #e23a3a;
  }

  /*对齐*/
  #leftSide .ultramodern-award #lottery1 .first-line,
  #leftSide .ultramodern-award #lottery1 .two-line{
    display: flex;
    justify-content: space-between;
  }

  /*第二行颜色*/
  #leftSide .ultramodern-award #lottery .two-line .left{
    color: red;
    font-size: 16px;
  }

  /*详情*/
  #leftSide .ultramodern-award #lottery .first-line .right,
  #leftSide .ultramodern-award #lottery .two-line .right{
    color: #999;
  }

  /*竞足*/
  #leftSide .ultramodern-award  #football1 ul,
  #leftSide .ultramodern-award  #basketball1 ul{
    list-style-type: none;
  }
  /*比分红色*/
  #leftSide .ultramodern-award  #football1 ul .red,
  #leftSide .ultramodern-award  #basketball1 ul li span:nth-of-type(3){
   color: red;
  }
  /*条目间距*/
  #leftSide .ultramodern-award  #football1 ul span,
  #leftSide .ultramodern-award  #basketball1 ul span{
    display: inline-block;
    margin: 5px;
    margin-top: 7px;

  }
  #leftSide .ultramodern-award  #football1 ul li span.left,
  #leftSide .ultramodern-award  #basketball1 ul li span:nth-of-type(1){
    margin-left: -12px;
  }

  /*标签背景*/
  #leftSide .ultramodern-award .content .nav li.active a{
    background: #e23a3a;
    color: #fff;
  }

  #leftSide .ultramodern-award .content .nav li a{
    width: 90px;
    height: 44px;
    border-radius: 10px;
    padding-left: 25px;
  }

  #leftSide .ultramodern-award .content .nav{
    display: flex;
    justify-content: space-around;
  }


</style>
